<template>
  <div class="list">
    <van-nav-bar title="类别列表" />

    <div class="content clearFix">
      <!-- 侧导航 -->
      <ul class="sidebar">
        <li
          v-for="(item,idx) of filterList(categoryList)"
          :key="item.id"
          @click="sidebarClick(item.id,idx)"
          :class="idx === sidebarCurrent ? 'active' : null"
        >{{item.mallCateforyName}}</li>
      </ul>

      <!-- 顶部导航栏 -->
      <div class="tabs">
        <ul class="topbar">
          <li
            v-for="(item,idx) of filterList(categorySubList)"
            :key="item.id"
            @click="topbarClick(item.id,idx)"
            :class="idx === topbarCurrent ? 'active' : null"
          >{{item.mallSubName}}</li>
        </ul>
        <div class="container">
          <div class="goodsList clearFix" v-for="item of categorySub" :key="item.id">
            <van-image class="image" :src="item.image1" lazy-load>
              <template v-slot:loading>
                <van-loading type="spinner" size="40" />
              </template>
            </van-image>
            <div class="info">
              <p>{{item.name}}</p>
              <p>
                <span class="new">现价:{{item.presentPrice}}</span>&nbsp;
                <s class="old">原价:{{item.oriPrice}}</s>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import * as api from "@/request/api/list.js";
export default {
  data() {
    return {
      categoryList: [],//大类数据
      categorySubList: [],//小类数据
      categorySub: [],//列表数据
      sidebarCurrent:0,//左侧默认高亮
      topbarCurrent:0//顶部默认高亮
    };
  },
  methods: {
    async API_getCategoryList() {
      // 读取大类数据的接口
      return await api.getCategoryList();
    },
    async API_getCategorySubList(categoryId) {
      // 读取小类数据的接口
      return await api.getCategorySubList({
        categoryId: categoryId
      });
    },
    async API_getGoodsListByCategorySubID(categorySubId) {
      // 读取商品列表的接口
      return await api.getGoodsListByCategorySubID({
        categorySubId: categorySubId
      });
    },
    filterList(arr){//过滤列表数量
      return arr.filter((item,idx)=>{
        return idx < 5
      })
    },
    async sidebarClick(id,idx=0){//点击左侧
      let res2 = await this.API_getCategorySubList(id)
      this.categorySubList = res2.data.data;

      let res3 = await this.API_getGoodsListByCategorySubID(res2.data.data[0].id);
      this.categorySub = res3.data.data;

      this.sidebarCurrent = idx
    },
    async topbarClick(id,idx=0){//点击顶部
      let res3 = await this.API_getGoodsListByCategorySubID(id);
      this.categorySub = res3.data.data;

      this.topbarCurrent = idx
    }
  },
  async created() {
    let res = await this.API_getCategoryList();
    let res2 = await this.API_getCategorySubList(res.data.data[0].id);
    let res3 = await this.API_getGoodsListByCategorySubID(res2.data.data[0].id);

    this.categoryList = res.data.data;
    this.categorySubList = res2.data.data;
    this.categorySub = res3.data.data;
  }
};
</script>

<style lang="scss">
@import "@/style/list/list"
</style>
